<template>
<el-select :model-value="modelValue" @visible-change='visibleChanged'>
    <el-option  :value="modelValue" :label="selectTreeLabel" style="width: 100%;overflow: visible;background-color:#fff" :style="{'height':height}">
        <el-scrollbar ref="selectTreeScrollbarRef" :height="height" >
            <el-tree
                :data="treeData"
                :show-checkbox="showCheckbox"
                :expand-on-click-node="false"
                :node-key="props.key"
                :default-expanded-keys="defaultExpandedKeys"
                :default-checked-keys="defaultCheckedKeys"
                :props="treeProps"
                @node-click="clickSelectTree"
            />
        </el-scrollbar>
    </el-option>                    
</el-select>

    
</template>
<script>
import tool from '@/utils/tool'
export default {
    props:{
        height:{
            type:[String, Number],
            default:'200px'
        },
        data:{
            type:Array,
            default:()=>{
                return []
            }
        },
        showCheckbox:{
            type:Boolean,
            default:false
        },
        props:{
            type:Object,
            default:()=>{
                return{
                    label:'name',
                    children:'children',
                    key:'id',
                    class:null
                }
            }
        },
        modelValue:[String,Number,Array,Object]
    },
    emits: ['update:modelValue','node-click'],
    data(){
        return {
            
        }
    },
    mounted(){
        
        
    },
    computed:{
        treeData(){
            if(this.data==null){
                return []
            }
            return this.data
        },
        treeProps(){
            if(!this.props.class){
                return Object.assign({},this.props,{class:this.customNodeClass})
            }
            return this.props
        },
        selectTreeLabel() {
            let arr=this.getParentNodes(this.data);
            return arr.filter(a=>arr.length>1?a[this.props.key]:true).map(a=>a[this.props.label]).join('/')
        },
        defaultCheckedKeys(){
            if(this.showCheckbox){
                return this.modelValue;
            }
            return []
        },
        defaultExpandedKeys(){
            let arr=this.getParentNodes(this.data);
            return arr.map(a=>a[this.props.key])
        },
    },
    methods:{
        clickSelectTree(node,treeNode){
            if(node){
                this.$emit('update:modelValue',node[this.props.key])
                if(this.$attrs.onNodeClick){
                    this.$emit('nodeClick',node,treeNode)
                }
            }
        },
        customNodeClass(node,treeNode){
            if(tool.ensureNotNull(node[this.props.key])==tool.ensureNotNull(this.modelValue)){
                return 'customNodeClass'
            }
            return null;
        },
        getParentNodes(data){
            let parent=[];
            (data || []).forEach(item=>{
                if(parent.length==0){
                    if(this.modelValue==(item[this.props.key] || 0)){
                        parent.push(item);
                    }
                    else if(item[this.props.children] && item[this.props.children].length>0){
                        const childArr=this.getParentNodes(item[this.props.children])
                        if(childArr.length>0){
                            parent.push(item);
                            parent=parent.concat(childArr)
                        }
                    }
                }                    
            })
            return parent
        },
        scrollTop(){
            this.$refs.selectTreeScrollbarRef.setScrollTop((this.getParentNodes(this.data).length-1)*26)
        },
        visibleChanged(val){
            if(val){
                this.$nextTick().then(()=>{
                    this.scrollTop()
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.el-tree :deep(.customNodeClass)>:first-child{
    color:red;
}
</style>